<template>
  <div id="app">
    <b-navbar type="dark" variant="info">
      <b-navbar-brand :href="'/ipns/'+global.id+'/'">VideoShare</b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item :href="'/ipns/'+user.id+'/#/'+type.name" v-for="type in user.type" :key="type.name">{{
              type.title
            }}
          </b-nav-item>
        </b-navbar-nav>
        <b-navbar-nav class="ml-auto">
          <b-nav-item-dropdown right>
            <template slot="button-content">更多</template>
            <b-dropdown-item :href="'/ipns/'+user.id">前往 {{ user.username }} 用户空间</b-dropdown-item>
            <b-dropdown-item :href="'/ipns/'+global.id">前往聚合空间</b-dropdown-item>
            <b-dropdown-item :href="global.news">公告</b-dropdown-item>
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item :href="global.dashboard">管理我的空间</b-dropdown-item>
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item :href="link.link" v-for="link in global.extend" :key="link.link">{{
                link.title
              }}
            </b-dropdown-item>
            <b-dropdown-item :href="global.client.download">下载客户端</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <b-container fluid class="main">
      <b-row>
        <b-col lg="9">
          <video id="player" :poster="cover" controls autoplay class="video-js vjs-big-play-centered">
          </video>
          <h2 class="title">{{ title }}</h2>
          <p>{{ description }}</p>
        </b-col>
        <b-col lg="3" class="info">
          <b-card>
            <b-media>
              <b-img slot="aside" width="64" :src="user.avatar" rounded="circle"></b-img>
              <h5>{{ user.username }}</h5>
              <p>{{ user.description }}</p>
            </b-media>
          </b-card>
          <b-card>
            <div class="ipfsqr">
              <p>IPFS地址</p>
              <div id="qrCode" ref="qrCodeDiv" class="qr"></div>
            </div>
            <div class="playerselect">
              <p>加载其他解码器 (Html5可能不支持播放本页视频)</p>
              <a :href="'potplayer://'+playfileurl">Potplayer for Windows</a><br>
              <a :href="'iina://weblink?url='+playfileurl">Iina player for Mac os</a>
            </div>
          </b-card>
          <json-viewer class="hidden-sm" :value="mediainfo" :expand-depth=2></json-viewer>
        </b-col>
      </b-row>
      <b-row>
        <b-col>
          <b-list-group class="filelist">
            <b-list-group-item button v-for="file in files" :key="file.url" @click="playfile(file)">
              {{ file.title }}
              <b-badge variant="success" class="rate">{{ file.size / file.duration | formatRate }}</b-badge>
              <b-badge variant="warning" class="dura">{{ file.duration | formatDura }}</b-badge>
              <b-badge variant="info" class="size">{{ file.size | formatSize }}</b-badge>
            </b-list-group-item>
          </b-list-group>
        </b-col>
      </b-row>
    </b-container>
    <div class="footer">
      <b-container>
        <b-row>
          <b-col sm="12" md="6">
            <b-row>
              <b-col cols="4" v-for="l in global.links" :key="l.link"><a :href="l.link">{{ l.title }}</a></b-col>
            </b-row>
          </b-col>
          <b-col sm="6" md="2">
            <b-row>
              <div id="qrCodeipns" ref="qrCodeDivipns" class="qr"></div>
            </b-row>
          </b-col>
          <b-col sm="6" md="4">
            <a class="f_logo" :href="'/ipns/'+global.id+'/'"></a>
          </b-col>
        </b-row>
      </b-container>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'
import videojs from 'video.js'
import QRCode from 'qrcodejs2';

export default {
  name: 'app',
  data() {
    return {
      title: "",
      description: "",
      cover: "",
      user: {
        avatar: "",
        username: "",
        description: ""
      },
      global: {
        id: "",
        dashboard: "",
        client: {
          download: ""
        },
        extend: [],
        links: [],
      },
      files: [],
      playfileurl: '',
      mediainfo: {}
    }
  },
  methods: {
    async init() {
      let hash = window.location.hash;
      let files_json_file = "./files.json"
      if (hash !== "") {
        let files_json = hash.match("files.json=(.*)")
        if (files_json !== null) {
          files_json_file = files_json[1]
          if (files_json_file.substr(0, 6) !== "/ipfs/") {
            files_json_file = "/ipfs/" + files_json_file
          }
        }
      }
      await Axios.get(files_json_file).then((res) => {
        this.files = res.data.files;
        this.title = res.data.title;
        this.description = res.data.description;
        this.cover = res.data.cover;
        setTimeout(() => {
          this.playfile(this.files[0])
        }, 1)
        let myhash = window.location.pathname;
        let qrcode = '';
        if (myhash.substring(0, 6) === "/ipfs/") {
          qrcode = myhash;
        } else {
          qrcode = window.location.href;
        }
        new QRCode(this.$refs.qrCodeDiv, {
          text: qrcode,
          width: 120,
          height: 120,
          colorDark: "#333333",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.L
        });
      });
      Axios.get('./user.json').then((res) => {
        this.user = res.data;
        return this.user.id;
      }).then((id) => {
        Axios.get('/ipns/' + id + '/user.json').then((res) => {
          this.user = res.data;
        }).catch((err) => {
          console.log(err)
        })
      });
      Axios.get('./global.json').then((res) => {
        this.global = res.data;
        return this.global.id;
      }).then((id) => {
        Axios.get('/ipns/' + id + '/global.json').then((res) => {
          this.global = res.data;
        }).catch((err) => {
          console.log(err)
        });
        new QRCode(this.$refs.qrCodeDivipns, {
          text: '/ipns/' + id,
          width: 120,
          height: 120,
          colorDark: "#333333",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.L
        });
      });
    },
    playfile(item) {
      this.mediainfo = item.mediainfo;
      this.playfileurl = window.location.origin + item.url;
      const sources = [{
        type: item.type === "m3u8" ? "application/x-mpegURL" : "video/mp4",
        src: item.url
      }];
      const playnext = this.playnext;
      const player = videojs('player');
      player.ready(function () {
        const obj = this;
        obj.src(sources);
        obj.load();
        obj.on('ended', () => {
          playnext(sources[0].src);
        });
      });
    },
    playnext(url) {
      if (this.files.length > 1) {
        for (let i = 0; i < this.files.length - 1; i++) {
          if (this.files[i].url === url) {
            this.playfile(this.files[i + 1])
          }
        }
      }
    },
  },
  created() {
    this.init()
  },
  filters: {
    formatSize(size) {
      const sub = ['B', 'K', 'M', 'G', 'T'];
      for (let i = 0; i < sub.length; i++) {
        if (size < 1024) return size.toFixed(2) + sub[i];
        size /= 1024;
      }
      return '';
    },
    formatDura(time) {
      let min = time / 60;
      return min.toFixed(0) + '分' + time % 60 + '秒';
    },
    formatRate(bit) {
      let kbit = bit * 8 / 1024;
      let mbit = kbit / 1024;
      return mbit.toFixed(2) + 'Mbps';
    }
  },
  watch: {
    title(title) {
      document.title = this.title !== "" ? this.title + " - VideoShare" : "VideoShare";
    }
  }
}
</script>

<style>
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#player {
  width: 100%;
  height: 80vh;
}

.info {
  max-height: 80vh;
  overflow: auto;
}

.filelist button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer {
  margin-top: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f6f9fa;
}

.f_logo {
  display: inline-block;
  width: 300px;
  height: 100px;
  background: url("assets/logo.png");
}

@media screen and (max-width: 992px) {
  .hidden-sm {
    display: none;
  }

  #player {
    width: 100%;
    height: calc(57vw);
  }
}

.ipfsqr {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.ipfsqr p {
  margin-bottom: 4px;
  text-align: center;
}

.playerselect {

}

.playerselect p {
  margin-bottom: 4px;
  text-align: center;
}
</style>
